import React from "react";
import type { FormProps } from "antd";
import { Button, Form, Input, message, Space } from "antd";

import { _login, _getlist } from "../api";
import "./login.css";

type FieldType = {
  username: string;
  password: string;
};

const onFinish: FormProps<FieldType>["onFinish"] = async (values) => {
  console.log("Success:", values);
  console.log("1111");
  const { data } = await _login(values);
  console.log(data, "data");
  if (data.code) {
    message.success(data.message);
    const datas = await _getlist();
    console.log(datas, "datas");

    // window.location.href = "/home/homepage";
  } else {
    message.error(data.message);
  }
};

const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
  console.log("Failed:", errorInfo);
  console.log("2222");
};

function Login() {
  return (
    <div className="login_container">
      <div className="login_title">
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item<FieldType>
            label="Username"
            name="username"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item<FieldType>
            label="Password"
            name="password"
            rules={[{ required: true, message: "Please input your password!" }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}

export default Login;
